<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <h3>如何把数据从子组件传给父组件</h3>
        <my-com1
        @abc="hAbc"
        @abcd="hAbcd"
        @event1="hEvent1"></my-com1>
    </div>
    <script src="./vue.js"></script>

    <script>
        // 注意：
       //  1. 事件可以监听多个
       //  2. $emit.如果写在视图中，可以省略this
       //  3. 事件不一定非要携带数据

        const vm = new Vue({
            el: '#app',
            components: {
                MyCom1: {
                    template: `
                        <div>
                            <h2>子组件</h2>
                            <button @click="h1">发abc事件</button>
                            <button @click="h2">发abcd事件</button>
                            <button @click="$emit('abcd',1)">发abcd事件-$emit简写</button>
                            <button @click="$emit('event1')">发event1事件</button>
                        </div>`,
                    methods: {
                        h1 () {
                            // $emit 是vue提供的方法，用来向父组件抛出事件
                            this.$emit('abc',{a:1,b:2})
                        },
                        h2 () {
                            // $emit 是vue提供的方法，用来向父组件抛出事件
                            this.$emit('abcd',100)
                        }
                    }
                }
            },
            methods: {
                hAbc (obj) {
                    console.log('收到了事件abc，参数是',obj)
                },
                hAbcd (obj) {
                    console.log('收到了事件abcd，参数是',obj)
                },
                hEvent1 () {
                    alert('收到了子组件抛出的信息')
                }
            }
        })
    </script>
</body>
</html>